<template>
  <el-menu router class="index-menu" mode="horizontal" :default-active="activeIndex" @select="handleSelect" background-color="#373d417a" text-color="#fff" active-text-color="#409EFF">
    <div class="logo"><img :src="require('@/assets/logo.png')" alt=""></div>
    <el-input class="select-input" placeholder="请输入内容" prefix-icon="el-icon-search" />
    <el-menu-item v-for="(item, index) in getMenu" :key="index" :index="item.index">
      {{ item.title }}
    </el-menu-item>
    <el-menu-item @click="joinUs">
      加入我们
    </el-menu-item>
  </el-menu>
</template>

<script>
import device from "current-device";
// import routes from "../../router/routes.js";
export default {
  data() {
    return {
      activeIndex: "0",
      // ⾸⻚、成果展示、排⾏榜、资源中⼼、创新盒⼦，⽤户登录
      menuList: [
        { index: "/", title: "⾸⻚" },
        { index: "products", title: "成果展示" },
        { index: "rank", title: "排⾏榜" },
        { index: "resource", title: "资源中⼼" },
        { index: "box", title: "创新盒⼦" },
        // { index: "apply", title: "加入我们" }
      ]
    };
  },
  methods: {
    handleSelect(index) {
      return index;
    },
    joinUs() {
      window.open("/apply");
    }
  },
  computed: {
    mobile() {
      return device.mobile();
    },
    getMenu() {
      const oo = ["products", "rank"];
      const mm = this.menuList.filter(val => {
        return !oo.includes(val.index);
      });
      return this.mobile ? mm : this.menuList;
    }
  }
};
</script>

<style lang="scss" scoped>
.index-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  border: none;
  backdrop-filter: blur(15px);

  .logo {
    img {
      width: 48px;
    }
  }
}
.index-menu .logo {
  flex-grow: 1;
  border: none;
  outline: none;
  color: #ffffff;
  padding-left: 20px;
}
.select-input {
  max-width: 256px;
  margin-right: 45px;
}
@media (orientation: portrait) {
  .select-input {
    display: none;
  }
}

.el-menu-item {
  background-color: transparent !important;
}
.is-active {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
</style>

